<template>
  <div>
      <div class="selectType">
            <div class="typeright">
                <ul>
                    <li v-for="(item2,index) in booktype" :key="index">{{item2}}</li>
                    <li class="all">全部</li>
                </ul>
            </div>
        </div>
        <div class="bookpage">
            <div id="pages">
                <ul>

                    <li v-for="(user,index) in newUser" :key="index+1">

                        <div class="bookbox2">
                            <img :src="user.img" alt="1">
                          
                            <div class="imgright">
                                <div class="bookname2">{{user.name}}</div>
                                <span>讨论：{{user.discuss}}</span>
                                <span>点赞：{{user.like}}</span>
                            </div>


                        </div>

                    </li>
                </ul>

                <!--  这里绑定总页数    父组件传过来参数 复用件接收后判断如果为true执行css样式  -->
                <pagination :pages=showUsers @click-pag="fn" :page='uPage'> </pagination>

            </div>
        </div>
  </div>
</template>

<script>
import pagination from '../components/pagination'
export default {
    data(){
        return{
             users: [{
                        id: 1,
                        name: '了不起的狐狸爸爸',
                        
                        img:require('../assets/img/book/lbqdhlbb.png'),
                        discuss: 3444,
                        like: 926,
                    }, {
                        id: 2,
                        name: '小猪唏哩呼噜',
                        img: require('../assets/img/book/xzxlhl.png'),
                        discuss: 3406,
                        like: 458,
                    }, {
                        id: 3,
                        name: '猜猜我有多爱你',
                        img: require('../assets/img/book/ccwydan.png'),
                        discuss: 1836,
                        like: 470,
                    }, {
                        id: 4,
                        name: '格林童话选',
                        img: require('../assets/img/book/glthx.png'),
                        discuss: 1800,
                        like: 538,
                    }, {
                        id: 5,
                        name: '青蛙和蟾蜍',
                        img: require('../assets/img/book/qwhcc.png'),
                        discuss: 1771,
                        like: 408,
                    }, {
                        id: 6,
                        name: '我有友情要出租',
                        img: require('../assets/img/book/wyyqycz.png'),
                        discuss: 1663,
                        like: 395,
                    }, {
                        id: 7,
                        name: '一年级大个儿二年级小个儿',
                        img: require('../assets/img/book/ynj.png'),
                        discuss: 1624,
                        like: 350,
                    }, {
                        id: 8,
                        name: '神笔马良',
                        img: require('../assets/img/book/sbml.png'),
                        discuss: 1604,
                        like: 622,
                    }, {
                        id: 9,
                        name: '夏洛的网',
                        img: require('../assets/img/book/xldw.png'),
                        discuss: 1467,
                        like: 244,
                    }, {
                        id: 10,
                        name: '了不起的狐狸爸爸',
                        img: require('../assets/img/book/lbqdhlbb.png'),
                        discuss: 1423,
                        like: 52,
                    }, {
                        id: 11,
                        name: '了不起的狐狸爸爸',
                        img: require('../assets/img/book/lbqdhlbb.png'),
                        discuss: 1423,
                        like: 52,
                    }, {
                        id: 12,
                        name: '了不起的狐狸爸爸',
                        img: require('../assets/img/book/lbqdhlbb.png'),
                        discuss: 1423,
                        like: 52,
                    }, {
                        id: 13,
                        name: '了不起的狐狸爸爸',
                        img: require('../assets/img/book/lbqdhlbb.png'),
                        discuss: 1423,
                        like: 52,
                    }, {
                        id: 14,
                        name: '了不起的狐狸爸爸',
                        img: require('../assets/img/book/lbqdhlbb.png'),
                        discuss: 1423,
                        like: 52,
                    }, {
                        id: 15,
                        name: '了不起的狐狸爸爸',
                        img: require('../assets/img/book/lbqdhlbb.png'),
                        discuss: 1423,
                        like: 52,
                    }, {
                        id: 16,
                        name: '了不起的狐狸爸爸',
                        img: require('../assets/img/book/lbqdhlbb.png'),
                        discuss: 1423,
                        like: 52,
                    }, {
                        id: 17,
                        name: '了不起的狐狸爸爸',
                        img: require('../assets/img/book/lbqdhlbb.png'),
                        discuss: 1423,
                        like: 52,
                    }, {
                        id: 18,
                        name: '了不起的狐狸爸爸',
                        img: require('../assets/img/book/lbqdhlbb.png'),
                        discuss: 1423,
                        like: 52,
                    }, {
                        id: 19,
                        name: '了不起的狐狸爸爸',
                        img: require('../assets/img/book/lbqdhlbb.png'),
                        discuss: 1423,
                        like: 52,
                    },

                ],
                uPage: 1, //当前页
                perPage: 15, //每页显示多少条
                search: '',
                booktype: ['诗歌', '自然', '绘本', '童话', '神话', '文史', '教学', '小说', '名著', '名人传记', ]
        }
    },
    components:{
        pagination
    },
    computed: {
                searchMethod() {

                    return this.users.filter(value => {
                        return value.name.match(this.search)
                    })



                },
                // 获取总页数 
                showUsers: {
                    get() {
                        return Math.ceil(this.users.length / this.perPage);
                    }
                },
                newUser: { //渲染到页面
                    get() { // 分割数据
                        // this.$options.methods.searchMethod();
                        return JSON.parse(JSON.stringify(this.users)).splice((this.uPage - 1) * this.perPage, this.perPage)
                    }

                },
            },

            methods: {
                fn(n) {
                    // console.log(n)
                    this.uPage = n; //接收到 子组件传过来的数据 修改data的显示
                },

            },
}
</script>

<style scoped>
@import '../assets/css/community.css';
</style>